<template>
	<div class="content">
		<p class="l_border"></p>
		<div class="msg">
			<p class="img" @click="previewImg(msg.pictures)">
				<img mode="aspectFit" :src="msg.pictures[0]" alt="">
			</p>
			<p class="title">{{msg.title}}</p>
			<div class="user_box">
				<div class="name_box">
					<p class="tx">
						<img mode="aspectFit" :src="msg.avatar" alt="">
					</p>
					<div>
						<p class="name">{{msg.createName}}</p>
						<p class="dz">
							<img src="/static/dz.png" alt="">
							{{msg.areaName}}
						</p>
					</div>
				</div>
				<div class="aniu_list">
					<p @click="toUser">沟通报价</p>
					<p @click="toGuarantee">担保交易</p>
					<p @click="toCompensate">申请赔付</p>
				</div>
				<p class="cx_text">
					<img src="/static/cx.png" alt="">
					诚信从我做起，本人支持大家使用平台的担保交易！
				</p>
			</div>
		</div>
		<p class="line"></p>
		<div class="fw_list">
			<div class="box">
				<div class="name_box">
					<p class="l"></p>
					<p>基本服务</p>
				</div>
				<p class="text" v-if="msg.basicServices">{{msg.basicServices}}</p>
				<p class="text" v-else>暂无基本服务～</p>
			</div>
			<div class="box">
				<div class="name_box">
					<p class="l"></p>
					<p>擅长服务</p>
				</div>
				<p class="text" v-if="msg.adeptServices">{{msg.adeptServices}}</p>
				<p class="text" v-else>暂无擅长服务～</p>
			</div>
			<div class="box">
				<div class="name_box">
					<p class="l"></p>
					<p>售后保证</p>
				</div>
				<p class="text" v-if="msg.afterSaleService">{{msg.afterSaleService}}</p>
				<p class="text" v-else>暂无售后保证～</p>
			</div>
		</div>
		<p class="line"></p>
		<div class="pl_box">
			<div class="title_box">
				<p class="l"></p>
				<p>全部评论</p>
			</div>
			<block v-if="plList.length">
				<div class="list" v-for="(item,index) in plList">
					<img :src="item.commentAvatar" alt="">
					<div class="msg1">
						<p class="name">{{item.commentUserName}}</p>
						<p class="text">{{item.content}}</p>
						<p class="time">{{item.createTime}}</p>
					</div>
				</div>
			</block>

			<div class="no_data" v-else>
				<img src="/static/no-data.png" alt="">
				<p>暂无评论</p>
			</div>
		</div>

		<div class="anniu_box">
			<div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
				<p @click="plShow = true">
					<img src="/static/pl_icon.png" alt="">
					{{total}}
				</p>
				<p @click="addGive" :style="{color:msg.flag?'#23AC39':'#999'}">
					<img v-if="msg.flag" src="/static/local-dz-hover.png" alt="">
					<img v-else src="/static/local-dz.png" alt="">
					<!-- <img src="/static/dz_icon.png" alt=""> -->
					{{msg.likesNum}}
				</p>
				<p>
					<button class="anniu" open-type="share">
						<img src="/static/fx_icon.png" alt="">
						去分享
					</button>
				</p>
			</div>
		</div>

		<!-- 激活弹窗 -->
		<u-popup safeAreaInsetBottom :round="12" :show="plShow" mode="bottom">
			<div class="pop_box">
				<p class="close" @click="plShow = false"><u-icon name="close" color="#999999" size="20"></u-icon></p>
				<div class="rate">
					<div>
						<p>靠谱指数</p>
						<u-rate minCount="0" size="46rpx" inactiveColor="#D8D8D8" activeColor="#F5E23B" :count="5" v-model="pldata.reliableNum"></u-rate>
					</div>
					<div>
						<p>性价比指数</p>
						<u-rate minCount="0" size="46rpx" inactiveColor="#D8D8D8" activeColor="#F5E23B" :count="5" v-model="pldata.costPerformanceNum"></u-rate>
					</div>
					<div>
						<p>办事效率指数</p>
						<u-rate minCount="0" size="46rpx" inactiveColor="#D8D8D8" activeColor="#F5E23B" :count="5" v-model="pldata.efficiencyNum"></u-rate>
					</div>
				</div>
				<div>
					<u--textarea v-model="pldata.content" placeholder="限评1次，请谨慎发表～" ></u--textarea>
				</div>
				<u-button 
					@click="sendSubmit"
					:disabled="isDisable"
					loadingMode="circle"
					:loading="isDisable"
					loadingText="提交中..."
					type="primary" 
					text="提交评价"
				>
				</u-button>
			</div>
		</u-popup>
	</div>
</template>

<script>
	import { mapState ,mapActions} from 'vuex'
	import api from '@/api';
	import { formatDateAll,Debounce } from '@/utils/utils.js'
	export default {
		data() {
			return {
				isIphoneXnum:0,
				plShow:false,
				isDisable:false,
				id:'',
				msg:{},
				pldata:{
					reliableNum:5,
					costPerformanceNum:5,
					efficiencyNum:5,
					localRecordId:'',
					content:''
				},
				total:0,
				param:{
					pageNo:1,
					pageSize:10,
					localRecordId:''
				},
				plList:[],
				timer: null,
				shareUserId:''
			}
		},
		computed: {
			...mapState({
                userId: state => state.user.userId,
				token: state => state.user.token,
			})
		},
		onLoad(options) {
			console.log(options)
			if(options.shareUserId){
				this.shareUserId = options.shareUserId
			}
			this.id = options.id
			this.getById(options.id)
			this.getPlList(options.id)
		},
		onShow(){
			uni.getSystemInfo({
				success: (res) => {
					console.log("手机信息res" + res.model);
					let modelmes = res.model;
					if (
						modelmes.search("iPhone 16") != -1 ||
						modelmes.search("iPhone 15") != -1 ||
						modelmes.search("iPhone 14") != -1 ||
						modelmes.search("iPhone 13") != -1 ||
						modelmes.search("iPhone 12") != -1 ||
						modelmes.search("iPhone 11") != -1 ||
						modelmes.search("iPhone X") != -1 ||
						modelmes.search("iPhone XR") != -1 ||
						modelmes.search("iPhone XS") != -1
					) {
						this.isIphoneXnum = 25;
					} else {
						this.isIphoneXnum = 0;
					}
				},
			});
		},
		methods: {

			// 点赞
			addGive() {
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				let data = {
					memberUserId:this.userId,
					localRecordId:this.id
				}
				if (this.timer) {
					return;
				}
				this.timer = setTimeout(() => {
					api.user.click_create(data).then(res=>{
						if(res.code == 200){
							this.msg.likesNum++
						}else{
							this.$toast(res.msg)
						}
					})
					this.timer = null;
				}, 500); 
			},

			// 评论列表
			getPlList(id){
				this.param.localRecordId = id
				api.user.page_by_id(this.param).then(res=>{
					if(res.code == 200){
						this.total = res.data.total
						res.data.list.map(item=>{
							item.createTime = formatDateAll(item.createTime)
						})
						this.plList = res.data.list
					}
				})
			},

			// 提交评论
			sendSubmit(){
				this.isDisable = true
				uni.showLoading({title: '提交中...'})
				this.pldata.localRecordId = this.id
				console.log(this.pldata)
				api.user.comment_add_create(this.pldata).then(res=>{
					if(res.code == 200){
						this.plShow = false
						this.isDisable = false
						uni.hideLoading()
						this.getPlList(this.id)
					}else{
						uni.hideLoading()
						this.isDisable = false
						this.$toast(res.msg)
					}
				})
			},

			// 详情
			getById(id){
				api.user.get_detail({id}).then(res=>{
					if(res.code == 200){
						if(res.data.pictures){
							res.data.pictures = res.data.pictures.split(',')
						}
						this.msg = res.data
					}
				})
			},

			// 私聊
			toUser(){
				let setData = JSON.stringify({
					memberUserId:this.msg.creator,
					id:this.msg.id,
					bAvatar: this.msg.avatar || '/static/mr_tx.png',
					memberUserName:this.msg.createName
				})
				uni.navigateTo({
					url: `/pages/chat/index?setData=${setData}`
				});
			},

			// 申请赔付
			toCompensate(){
				uni.navigateTo({
					url: `/pages/compensate/index`
				});
			},

			// 担保交易
			toGuarantee(){
				uni.navigateTo({
					url: `/pages/guarantee/index`
				});
			},

			// 预览
			previewImg(imgList) {
				uni.previewImage({
				current: imgList[0], // 当前显示图片的http链接
				urls: imgList // 需要预览的图片http链接列表
				});
			},
		},
		onShareAppMessage() {
			return {
				title: '免费用万人接单群',
				path: `/pages/local/xq/index?shareUserId=${this.userId}`
			}
		},
	}
</script>

<style lang="scss" scoped>
	$colors: (
		(#3B74F5,#0443D1),
		(#66DB89,#09B300),
		(#F07B7B,#FA0000),
	);
	.content{
		width: 100%;
		min-height: 100vh;
		.l_border{
			width: 100%;
			height: 1px;
			box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
			position: fixed;
			top:0;
		}
		.line{
			width: 100%;
			height: 20rpx;
			background: #F7F7F7;
		}
		.msg{
			padding:24rpx 30rpx;
			.img{
				width: 345px;
				height: 271px;
				border-radius: 20rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				padding:28rpx 0 42rpx 0;
				border-bottom:1px solid #D8D8D8;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
			.user_box{
				padding:30rpx 0 22rpx 0;
				.name_box{
					display: flex;
					.tx{
						width: 80rpx;
						height: 80rpx;
						img{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					div{
						display: flex;
						justify-content: space-around;
						flex-direction:column;
						margin-left:24rpx;
						.name{
							font-size: 28rpx;
							font-weight: bold;
							color: #3D3D3D;
						}
						.dz{
							font-size: 24rpx;
							color: #999999;
							display: flex;
							align-items: center;
							img{
								width: 30rpx;
								height: 30rpx;
								margin-right:4rpx;
							}
						}
					}
				}
				.aniu_list{
					display: flex;
					justify-content: space-between;
					margin-top:46rpx;
					p{
						width: 210rpx;
						height: 96rpx;
						line-height: 96rpx;
						border-radius: 100rpx;
						text-align: center;
						font-size: 32rpx;
						font-weight: 500;
						color: #FFFFFF;
						@for $i from 1 through length($colors){
							&:nth-child(#{$i}){
								$start-color: nth(nth($colors, $i), 1);
								$end-color: nth(nth($colors, $i), 2);
								background: linear-gradient(270deg, $start-color 4%, $end-color 100%);
							}
						}
					}
				}
				.cx_text{
					font-size: 26rpx;
					font-weight: 500;
					color: #23AC39;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top:40rpx;
					img{
						width: 32rpx;
						height: 38rpx;
						margin-right:12rpx;
					}
				}
			}
		}
		.name_box{
			display: flex;
			align-items: center;
			color:#333333;
			font-size: 32rpx;
			font-weight: 500;
			.l{
				width: 3px;
				height: 9px;
				background: #23AC39;
				margin-right:16rpx;
			}
		}
		.fw_list{
			padding:0 30rpx;
			.box{
				border-bottom:1px solid #D8D8D8;
				padding-bottom:20rpx;
				margin-top:20rpx;
				&:last-child{
					border-bottom:none;
				}
				.text{
					font-size: 28rpx;
					color: #333333;
					margin-top:6rpx;
				}
			}
		}
		.pl_box{
			padding:0 30rpx;
			.title_box{
				@extend .name_box;
				height: 82rpx;
			}
			.list{
				display: flex;
				padding:40rpx 0;
				border-top:1px solid #D8D8D8;
				img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.msg1{
					flex: 1;
					margin-left:16rpx;
					.name{
						font-size: 28rpx;
						color: #999999;
					}
					.text{
						color: #3D3D3D;
						font-size: 32rpx;
						margin:10rpx 0;
					}
					.time{
						color: #999999;
						font-size:28rpx;
					}
				}
			}
		}
		.anniu_box{
			width: 100%;
			height: 140rpx;
			.box{
				width: 92%;
				height: 140rpx;
				position: fixed;
				bottom:0;
				left: 0;
				padding:0 30rpx;
				z-index: 100;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FAFAFA;
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
				p{
					display: flex;
					align-items: center;
					color: #999999;
					font-size:24rpx;
					button{
						background: none;
						border:none;
						padding:0;
						display: flex;
						align-items: center;
						color: #999999;
						font-size:24rpx;
					}
					button::after{
						border:none !important;
					}
					img{
						width: 40rpx;
						height: 40rpx;
						margin-right:12rpx;
					}
				}
			}
		}
		.pop_box{
			border-radius: 20rpx 20rpx 0px 0px;
			padding:0 30rpx;
			background: linear-gradient(180deg, #D3F6D9 0%, #FFFFFF 36%);
			.close{
				display: flex;
				justify-content: flex-end;
				padding-top:24rpx;
				margin-bottom:40rpx;
			}
			.rate{
				div{
					border-bottom:1px solid #D8D8D8;
					height: 80rpx;
					display: flex;
					align-items: center;
					&:last-child{
						border-bottom:none;
					}
					p{
						width: 200rpx;
						font-size: 28rpx;
						color: #3D3D3D;
					}
				}
			}
			/deep/ .u-button{
                height: 96rpx;
                line-height: 96rpx;
                border-radius: 100rpx;
                background: #23AC39;
                font-size: 32rpx;
                text-align: center;
                font-weight: 500;
                color:#fff;
                border:none;
				margin:130rpx 0 50rpx 0;
            }
		}
		.no_data{
			text-align: center;
			padding-bottom:50rpx;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
	}
</style>
